@font-face {
	font-family: siyuan-extralight;
	src: url(/font/siyuan-extralight-de077a913a.eot);
	src: url(/font/siyuan-extralight-de077a913a.eot#font-spider)
		format('embedded-opentype'),
		url(/font/siyuan-extralight-3a0bd6fc2f.woff) format('woff'),
		url(/font/siyuan-extralight-1042d26e37.ttf) format('truetype'),
		url(/images/siyuan-extralight-336bfa9f85.svg) format('svg');
	font-weight: 400;
	font-style: normal
}

@font-face {
	font-family: 'Material Icons';
	font-style: normal;
	font-weight: 400;
	src: url(/font/MaterialIcons-Regular2-edc437c996.woff2)
		format('woff2'), url(/font/MaterialIcons-Regular-3c3d024279.woff)
		format('woff')
}

.material-icons {
	font-family: 'Material Icons';
	font-weight: 400;
	font-style: normal;
	font-size: 24px;
	display: inline-block;
	width: 1em;
	height: 1em;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	word-wrap: normal;
	white-space: nowrap;
	direction: ltr;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: 'liga'
}

.siyuan {
	font-family: siyuan-extralight
}

* {
	margin: 0;
	padding: 0
}

html {
	background-color: #2c2c32;
	background-size: cover;
	height: 100%;
	background-attachment: fixed;
	touch-action: none
}

body {
	position: relative;
	min-width: 1200px;
	width: 100%;
	min-height: 100%;
	margin: 0 auto;
	-webkit-overflow-scrolling: touch;
	overflow-scrolling: touch;
	-webkit-tap-highlight-color: transparent;
	tap-highlight-color: transparent;
	color: #333;
	overflow: hidden;
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
	background-image: url(/images/doodle-7f6119a144.png);
	font: 16px "PingFang SC", "Microsoft YaHei", "Microsoft JhengHei", "黑体",
		arial, STHeiti, '\5b8b\4f53'
}

body.overflowHidden {
	overflow: hidden
}

input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 1000px #1f1818 inset;
	-webkit-text-fill-color: #fff
}

button, input, keygen, select, textarea {
	font: 16px "PingFang SC", "Microsoft YaHei", "Microsoft JhengHei", "黑体",
		arial, STHeiti, '\5b8b\4f53';
	border: none;
	outline: 0;
	color: #333
}

li, ul {
	list-style-type: none
}

a, a:active, a:focus {
	outline: 0;
	text-decoration: none
}

a img, a:active img, a:focus img {
	border: 0
}

a {
	color: #333
}

i {
	font-style: normal
}

.clearfix:after {
	content: " ";
	display: block;
	clear: both
}

.hide {
	display: none
}

.base-img {
	background-image: url(/images/baseImages-9707e955aa.png)
}

.icon-img {
	background-image: url(/images/iconImages-cafd935dad.png);
	background-size: 1000px 1000px
}

.tool-img {
	background-image: url(/images/images-abb0efe34b.png)
}

.pcImage {
	background-image: url(/images/pcImages-d7a3fa4aef.png);
	background-size: 500px auto
}

.new-base-img {
	background-image: url(/images/new_images-c2d60a779f.png);
	background-size: 1000px 1000px
}

.transparent-bg {
	background-image:
		url()
}

.transparent-bg-1 {
	background-image:
		url()
}

.transparent-bg-2 {
	background-image:
		url();
	border-radius: 3px
}

pre {
	display: table
}

textarea.noSelect {
	-webkit-user-select: none
}

:not (.has-scrollbar )::-webkit-scrollbar {
	width: 0;
	height: 0
}

::-webkit-scrollbar-track-piece {
	-webkit-border-radius: 6px
}

::-webkit-scrollbar-thumb:vertical {
	height: 5px;
	background-color: #f56464;
	-webkit-border-radius: 4px
}

::-webkit-scrollbar-thumb:horizontal {
	width: 5px;
	background-color: #f56464;
	-webkit-border-radius: 4px
}

.has-scrollbar {
	overflow-x: hidden
}

.has-scrollbar::-webkit-scrollbar {
	position: absolute;
	right: 0;
	top: 0;
	width: 8px;
	height: 8px
}

.has-scrollbar.small-scrollbar::-webkit-scrollbar {
	position: absolute;
	right: 0;
	top: 0;
	width: 4px;
	height: 4px
}

.inline-block {
	display: inline-block
}

.page-center {
	width: 1200px;
	margin: 0 auto
}

.text-ellipsis {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis
}

.no-user-select {
	-webkit-user-select: none;
	user-select: none
}

.highlight {
	color: #f56464
}

.highlight-light {
	color: #ffb4b4
}

.inset-container {
	border-radius: 4px;
	box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset, 0 1px 0
		rgba(255, 255, 255, .2);
	background: rgba(37, 33, 33, .6);
	color: #fff;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .4)
}

.popup-input {
	font-size: 14px;
	padding: 10px;
	border: none;
	background: rgba(0, 0, 0, .3);
	border-radius: 4px;
	box-shadow: 0 1px 1px rgba(0, 0, 0, .25) inset;
	color: #fff;
	resize: none
}

.scroll-hint {
	background: linear-gradient(rgba(60, 60, 70, .98) 15px, transparent),
		linear-gradient(rgba(0, 0, 0, .2), transparent 100%),
		linear-gradient(to top, rgba(60, 60, 70, .98) 15px, transparent)
		bottom, linear-gradient(transparent, rgba(0, 0, 0, .2) 100%) bottom;
	background-repeat: no-repeat;
	background-attachment: local, scroll, local, scroll;
	background-size: 100% 50px, 100% 10px, 100% 50px, 100% 10px
}

header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 45px;
	color: #fff;
	box-shadow: 0 1px 1px rgba(0, 0, 0, .3);
	background: #c73e3e;
	z-index: 100
}

header.has-design-lead {
	top: 100px
}

header .logo {
	float: left;
	width: 150px;
	height: 25px
}

header .logo:not (.new-base-img ){
	position: relative;
	background: url(/images/footerIcons-ffedcf43f7.png);
	background-size: 500px 500px;
	background-position: 0 0;
	margin-top: 10px
}

header .logo::after {
	position: absolute;
	font-size: 12px;
	top: 10px;
	right: -36px;
	color: #c73e3e;
	background: #fff;
	display: block;
	border-radius: 2px;
	padding: 0 3px
}

header .header-main {
	width: 1200px;
	margin: 0 auto
}

header nav {
	float: left
}

header nav a {
	float: left;
	line-height: 45px;
	color: inherit;
	margin-left: 40px;
	opacity: .7
}

header nav a.active, header nav a:hover {
	opacity: 1
}

header .notification-btn {
	float: right;
	line-height: 20px;
	height: 20px;
	font-size: 13px;
	margin: 2px 5px 0 0;
	position: relative;
	cursor: pointer;
	padding: 10px;
	padding-left: 24px
}

header .notification-btn:hover {
	z-index: -1
}

header .notification-btn:hover .drop-menu-box {
	display: block
}

header .notification-btn::before {
	content: '';
	position: absolute;
	left: 0;
	top: 10px;
	height: 20px;
	width: 20px;
	background-image: url(/images/new_images-c2d60a779f.png);
	background-size: 1000px 1000px;
	background-position: -865px -95px
}

#lastYear {
	position: relative;
	padding-left: 30px
}

#lastYear::after, #lastYear::before {
	content: '';
	display: inline-block;
	position: absolute;
	background: url(/images/2017nav-c95cb62556.png);
	height: 27px;
	background-size: 105px 27px;
	top: 9px
}

#lastYear::before {
	width: 50px;
	left: 0
}

#lastYear::after {
	width: 15px;
	background-position: -90px 0;
	right: -10px
}

#getVip {
	position: relative;
	padding-left: 30px;
	cursor: pointer
}

#getVip::before {
	content: '';
	display: inline-block;
	position: absolute;
	background: url(/images/getVipNav-fede19b7f0.png);
	width: 32px;
	height: 26px;
	background-size: 32px 26px;
	top: 9px;
	left: -5px
}

.login-bar {
	float: right;
	position: relative
}

.login-bar .link {
	float: right;
	color: inherit;
	font-size: 14px;
	line-height: 45px;
	position: relative
}

.login-bar .link:nth-child(2) {
	margin-right: 16px
}

.login-bar .link:nth-child(2)::after {
	content: '|';
	position: absolute;
	right: -10px
}

.login-bar .base-avator {
	margin-top: 12px;
	width: 22px;
	height: 22px;
	z-index: 1;
	position: relative
}

.login-bar:hover .drop-menu-box {
	display: block
}

.small-vip-icon {
	position: absolute;
	right: -8px;
	top: 3px;
	width: 20px;
	height: 14px;
	background-position: -856px -20px;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, .2))
}

.small-vip-icon.vip2 {
	background-position: -827px -20px
}

.toast {
	position: fixed;
	height: 45px;
	width: auto;
	top: 45px;
	left: 50%;
	background: rgba(63, 63, 74, .94);
	padding: 0 50px;
	border-radius: 0 0 2px 2px;
	z-index: 102;
	line-height: 45px;
	text-align: center;
	font-size: 16px;
	color: #fff;
	pointer-events: none;
	box-shadow: 0 2px 4px rgba(0, 0, 0, .4);
	transform: translate3d(-50%, 0, 0);
	transition: opacity .3s, transform .3s;
	white-space: nowrap
}

.toast-enter {
	opacity: .01;
	transform: translate3d(-50%, -45px, 0)
}

.toast-enter.toast-enter-active {
	opacity: 1;
	transform: translate3d(-50%, 0, 0)
}

.toast-leave {
	opacity: 1;
	transform: translate3d(-50%, 0, 0)
}

.toast-leave.toast-leave-active {
	opacity: .01;
	transform: translate3d(-50%, -45px, 0)
}

.copy_toast {
	position: fixed;
	z-index: 1000000;
	opacity: 1;
	width: 64px;
	height: 26px;
	text-align: center;
	transform: translateX(-50%);
	font-size: 12px;
	line-height: 28px;
	pointer-events: none;
	transition: opacity .3s, transform .3s;
	padding: 0 10px;
	white-space: nowrap;
	background: rgba(0, 0, 0, .9);
	box-shadow: 0 1px 1px rgba(0, 0, 0, .5);
	border: 1px solid #fff;
	color: #fff;
	border-radius: 4px
}

.copy_toast::before {
	content: "";
	position: absolute;
	border-width: 0 6px 6px;
	border-style: solid;
	border-color: transparent transparent #000;
	z-index: 10;
	left: 50%;
	bottom: -6px;
	-webkit-transform: translateX(-6px) rotate(180deg);
	opacity: .9
}

.copy_toast::after {
	content: "";
	position: absolute;
	transform: translateX(-50%);
	border-width: 0 8px 8px;
	border-style: solid;
	border-color: transparent transparent #eee;
	z-index: 0;
	left: 50%;
	bottom: -8px;
	-webkit-transform: translateX(-8px) rotate(180deg);
	opacity: .9
}

.copy_toast-appear, .copy_toast-enter {
	opacity: .01;
	transform: translate3d(-50%, -15px, 0)
}

.copy_toast-appear.copy_toast-appear-active, .copy_toast-enter.copy_toast-enter-active
	{
	opacity: 1;
	transform: translate3d(-50%, 0, 0)
}

.copy_toast-leave {
	opacity: 1;
	transform: translate3d(-50%, 0, 0)
}

.copy_toast-leave.copy_toast-leave-active {
	opacity: .01;
	transform: translate3d(-50%, -15px, 0)
}

.base-panel-wrapper .panel-title {
	font-size: 16px;
	color: #fff;
	margin-bottom: 15px
}

.base-panel {
	background: #fff;
	border-radius: 4px;
	box-shadow: 0 3px 3px 0 rgba(0, 0, 0, .3);
	padding: 20px;
	overflow: hidden
}

.base-btn {
	width: 100px;
	height: 30px;
	border-radius: 4px;
	line-height: 30px;
	font-size: 14px;
	color: #fff;
	text-align: center;
	background-color: #c73e3e;
	cursor: pointer;
	display: block;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .3)
}

.base-btn:not (.disabled ):not (.gray ):active {
	background-color: #d64f4f
}

.base-btn.disabled {
	cursor: default;
	-webkit-filter: grayscale(25%)
}

.base-btn.gray {
	background: #f2f2f2;
	color: #505050;
	text-shadow: none
}

.base-btn.small {
	height: 28px;
	line-height: 28px
}

.base-link {
	color: #f56464
}

.large-btn {
	width: 140px;
	height: 45px;
	line-height: 45px;
	font-size: 20px
}

.base-avator {
	display: inline-block;
	border-radius: 50%;
	width: 60px;
	height: 60px;
	overflow: hidden
}

.base-avator img {
	width: 100%
}

.base-hollow-btn {
	height: 30px;
	line-height: 30px;
	color: #f56464;
	border: 1px solid #f56464;
	text-align: center;
	border-radius: 4px;
	display: inline-block;
	cursor: pointer;
	font-size: 13px;
	padding: 0 26px;
	transition: background .2s;
	background: 0 0
}

.base-hollow-btn.large-btn {
	font-size: 14px;
	height: 36px;
	line-height: 36px;
	padding: 0 30px
}

.base-hollow-btn.three-btn {
	padding: 0;
	width: 64px
}

.base-hollow-btn:not (.disabled ).active, .base-hollow-btn:not (.disabled
	):hover {
	background: #f56464;
	color: #fff
}

.base-hollow-btn.gray {
	border: 1px solid #f2f2f2;
	color: #fff
}

.base-hollow-btn.gray:hover {
	background: #f2f2f2;
	color: #505050
}

.base-hollow-btn.dark-gray {
	border: 1px solid #999;
	color: #999
}

.base-hollow-btn.dark-gray:hover {
	background: #999;
	color: #fff
}

.base-hollow-btn.white {
	border: 1px solid #fff;
	color: #fff
}

.base-hollow-btn.white:hover {
	background: #fff;
	color: #f56464
}

.base-hollow-btn.disabled {
	opacity: .7;
	cursor: not-allowed
}

.base-hollow-btn.middle-btn {
	margin-left: 60px
}

.small-simple-button {
	border: 1px solid #fff;
	display: inline-block;
	line-height: 22px;
	color: #fff;
	border-radius: 2px;
	padding: 0 6px;
	cursor: pointer
}

.small-simple-button:hover {
	background: #fff;
	color: #c6443d
}

.hollow-btn {
	height: 24px;
	font-size: 12px;
	color: #f56464;
	border: 1px solid #f56464;
	border-radius: 4px;
	padding: 0 8px;
	background: 0 0;
	line-height: 20px;
	cursor: pointer;
	display: inline-block
}

.hollow-btn:not (.no-icon )::before {
	content: '';
	float: left;
	width: 15px;
	height: 15px;
	margin: 3px 3px 0 0;
	background-image: url(/images/iconImages-cafd935dad.png);
	background-size: 1000px 1000px
}

.hollow-btn.no-icon {
	text-align: center
}

.hollow-btn.red-btn {
	color: #f56464;
	border: 1px solid #f56464
}

.hollow-btn.gray-btn {
	color: #999;
	border: 1px solid #999
}

.hollow-btn.light-gray-btn {
	color: #eee;
	border: 1px solid #eee
}

.hollow-btn.large {
	width: 90px;
	height: 33px;
	line-height: 30px;
	font-size: 14px
}

.hollow-btn button::after {
	float: left;
	line-height: 20px
}

.hollow-btn.message-btn::before {
	background-position: -33px -165px
}

.hollow-btn.message-btn::after {
	content: '私信'
}

.hollow-btn.message-btn:not (.no-hover ):hover {
	color: #fff;
	border: 1px solid #fff
}

.hollow-btn.message-btn:not (.no-hover ):hover::before {
	background-position: -11px -165px
}

.hollow-btn.follow-btn::before {
	background-position: -56px -165px
}

.hollow-btn.follow-btn::after {
	content: '加关注'
}

.hollow-btn.follow-btn:hover {
	color: #39c55f;
	border: 1px solid #39c55f
}

.hollow-btn.follow-btn:hover::before {
	background-position: -78px -165px
}

.hollow-btn.follow-btn.followed {
	color: #39c55f;
	border: 1px solid #39c55f
}

.hollow-btn.follow-btn.followed::before {
	background-position: -100px -165px
}

.hollow-btn.follow-btn.followed::after {
	content: '已关注'
}

.hollow-btn.follow-btn.followed:hover {
	color: #f56464;
	border: 1px solid #f56464
}

.hollow-btn.follow-btn.followed:hover::before {
	background-position: -124px -165px
}

.hollow-btn.follow-btn.followed:hover::after {
	content: '取消关注'
}

.hollow-btn.publish-btn {
	width: 80px;
	border: 1px solid #f56464;
	color: #f56464;
	font-size: 14px;
	height: 30px;
	border-radius: 4px;
	background: 0 0;
	text-indent: 20px;
	position: relative;
	cursor: pointer
}

.hollow-btn.publish-btn:before {
	content: '';
	position: absolute;
	top: 2px;
	left: 13px;
	background-image: url(/images/iconImages-cafd935dad.png);
	background-size: 1000px 1000px;
	width: 20px;
	height: 20px;
	background-position: -413px -192px
}

.text-btn {
	border: 0;
	padding: 0;
	height: auto;
	line-height: 1
}

.text-btn:not (.no-icon )::before {
	margin: 0 3px 0 0
}

.base-sort-label {
	float: right;
	font-size: 14px;
	color: #666;
	white-space: nowrap
}

.base-sort-label span {
	margin-left: 20px;
	position: relative;
	cursor: pointer
}

.base-sort-label span:not (:first-child )::before {
	content: '';
	position: absolute;
	width: 1px;
	height: 14px;
	left: -10px;
	top: 3px;
	background: #666
}

.base-sort-label.light {
	color: #fff
}

.base-sort-label.light span.active {
	color: #ffb4b4
}

.base-sort-label.light span:not (:first-child )::before {
	background: #fff
}

.empty-state {
	margin: 150px 0;
	text-align: center
}

.empty-state .empty-img {
	width: 170px;
	height: 110px;
	background-image: url(/images/emptyStateImages-b9dba8b7cd.png);
	background-position: -192px -8px;
	display: inline-block
}

.empty-state p {
	margin-top: 30px
}

.empty-state a {
	color: #f56464;
	text-decoration: underline;
	cursor: pointer
}

.empty-state.white .empty-img {
	background-position: -192px -8px
}

.empty-state.dark p {
	color: #fff
}

.empty-state.dark .empty-img {
	background-position: -6px -8px
}

.search-result {
	margin-top: 20px;
	padding-bottom: 15px;
	font-size: 14px
}

.search-result p {
	float: left;
	line-height: 24px
}

.search-result .highlight {
	color: #f56464
}

.search-result .hollow-btn {
	float: left;
	margin: 0 0 0 10px
}

.search-result.white {
	color: #666
}

.search-result.white .stress {
	color: #333
}

.search-result.dark {
	color: #fff
}

.search-result.dark .stress {
	color: #fff
}

.search-result.no-top-Margin {
	margin-top: 0
}

.pc-app .back-top {
	right: 50px;
	margin-left: auto
}

.back-top-container {
	position: absolute;
	z-index: 1
}

.back-top {
	position: fixed;
	bottom: 50px;
	width: 48px;
	height: 48px;
	right: 50px;
	border-radius: 50px;
	margin-left: 620px;
	background-color: rgba(245, 100, 100, .6);
	cursor: pointer;
	transition: opacity .2s
}

.back-top::after {
	content: '';
	position: absolute;
	width: 22px;
	height: 22px;
	left: 14px;
	top: 17px;
	background: url(/images/footerIcons-ffedcf43f7.png);
	background-size: 500px 500px;
	background-position: -10px -79px;
	opacity: .8
}

.back-top:hover::after {
	opacity: 1
}

.back-top-enter {
	opacity: .01
}

.back-top-enter.back-top-enter-active {
	opacity: .7
}

.back-top-leave.back-top-leave-active {
	opacity: .01
}

.pagination {
	float: right;
	font-size: 13px;
	color: #aaa;
	margin-bottom: 20px;
	-webkit-user-select: none;
	user-select: none
}

.pagination li {
	float: left;
	width: 24px;
	height: 24px;
	margin-left: 7px;
	text-align: center;
	border-radius: 2px;
	line-height: 23px;
	border: 1px solid transparent
}

.pagination li.next, .pagination li.prev {
	width: 50px;
	border: 1px solid #aaa
}

.pagination li:not (.ellipsis ){
	cursor: pointer
}

.pagination li:not (.ellipsis ):not (.active ):not (.disabled ):hover {
	color: #666
}

.pagination li.active {
	cursor: default;
	border: 1px solid #f56464;
	color: #f56464
}

.pagination li.disabled {
	cursor: default
}

.popup-mask {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, .75);
	z-index: 9
}

.popup {
	position: absolute;
	margin: auto;
	top: 44px;
	left: 50%;
	width: 640px;
	background: rgba(50, 56, 68, .95);
	border: 1px solid #fff;
	border-radius: 0 0 8px 8px;
	z-index: 10;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .55);
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%)
}

.popup.no-bottom .content {
	border-radius: 0 0 8px 8px
}

.popup.center {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	border-radius: 8px
}

.popup .isSaveDate {
	float: left;
	margin: 1px 0 0 10px
}

.popup .checkBox {
	float: left;
	font-size: 14px;
	line-height: 20px;
	color: #fff;
	margin-top: 4px
}

.popup-close-btn {
	position: absolute;
	top: 15px;
	right: 15px;
	width: 16px;
	height: 16px;
	cursor: pointer;
	opacity: .8;
	background-position: -117px -8px
}

.popup-close-btn:hover {
	opacity: 1
}

.popup-title {
	text-align: center;
	width: 100%;
	height: 45px;
	line-height: 45px;
	font-size: 16px;
	text-shadow: 0 2px 2px rgba(0, 0, 0, .45);
	color: #fff
}

.popup-content {
	color: #fff;
	padding: 30px 20px;
	background: rgba(0, 0, 0, .2);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .15) inset, 0 1px 0
		rgba(255, 255, 255, .25);
	line-height: 1.8;
	font-size: 14px
}

.popup-content.no-padding {
	padding: 0
}

.popup-content .bottom-margin {
	display: inline-block;
	margin-bottom: 20px
}

.popup-content .top-margin {
	margin-top: 15px
}

.popup-content:after {
	content: " ";
	display: block;
	clear: both
}

.popup-content span.popup-normal-text {
	font-size: 13px
}

.popup-bottom {
	width: 100%;
	height: 50px
}

.popup-bottom .base-btn {
	float: right;
	width: auto;
	padding: 0 25px;
	margin: 12px 10px 0 0
}

.popup-section {
	padding: 10px 0
}

.popup-section:not (:first-child ){
	margin-top: 10px
}

.popup-item-desc, .popup-item-title {
	float: left;
	font-size: 14px;
	line-height: 26px;
	color: #fff
}

.popup-item-title.no-float {
	float: none
}

.popup-confirm {
	font-size: 16px
}

.popup-item-desc {
	margin-left: 10px
}

.popup-bottom-desc {
	float: left;
	font-size: 14px;
	margin-top: 20px
}

.popup-top-desc {
	float: left;
	font-size: 14px;
	margin-bottom: 20px
}

.popup-bottom-content {
	float: left;
	margin: 11px 0 0 20px
}

.popup-setting-item {
	display: inline-block;
	width: 100%
}

.font-16 {
	font-size: 16px
}

#setPasswordInput {
	width: 182px;
	height: 14px;
	margin-top: -4px
}

.C_tipText {
	position: relative
}

.C_tip {
	position: absolute;
	padding: 0 10px;
	white-space: nowrap;
	background: rgba(0, 0, 0, .9);
	box-shadow: 0 1px 1px rgba(0, 0, 0, .5);
	border: 1px solid #fff;
	color: #fff;
	border-radius: 4px;
	font-size: 12px;
	line-height: 26px;
	min-width: 30px;
	height: 26px;
	text-align: center;
	display: none;
	z-index: 999999;
	pointer-events: none
}

.C_tip:before {
	content: "";
	position: absolute;
	top: -6px;
	border-width: 0 6px 6px;
	border-style: solid;
	border-color: transparent transparent #000;
	z-index: 10
}

.C_tip:after {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: -8px;
	border-width: 0 8px 8px;
	border-style: solid;
	border-color: transparent transparent #eee;
	z-index: 0
}

.C_tip.tip_bottom:before {
	left: 50%;
	top: 26px;
	-webkit-transform: translateX(-6px) rotate(180deg);
	opacity: .9
}

.C_tip.tip_bottom:after {
	left: 50%;
	top: 26px;
	-webkit-transform: translateX(-8px) rotate(180deg);
	opacity: .9
}

.C_tip.tip_top:before {
	left: 50%;
	-webkit-transform: translateX(-6px);
	opacity: .9
}

.C_tip.tip_top:after {
	left: 50%;
	-webkit-transform: translateX(-8px);
	opacity: .9
}

.C_tip.tip_right:before {
	right: -9px;
	top: 50%;
	-webkit-transform: translateY(-3px) rotate(90deg);
	opacity: .9
}

.C_tip.tip_right:after {
	left: auto;
	right: -12px;
	top: 50%;
	-webkit-transform: translateY(-4px) rotate(90deg);
	opacity: .9
}

.C_tip.tip_left:before {
	left: -9px;
	top: 50%;
	-webkit-transform: translateY(-3px) rotate(-90deg);
	opacity: .9
}

.C_tip.tip_left:after {
	left: -12px;
	top: 50%;
	-webkit-transform: translateY(-4px) rotate(-90deg);
	opacity: .9
}

.border-style-item {
	position: relative;
	color: transparent
}

.border-style-item::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	margin: 0 8px;
	width: calc(100% - 16px);
	transform: translateY(-50%);
	border-bottom: 2px solid #ddd
}

.border-style-item[data-text=dashed]::before {
	border-bottom-style: dashed
}

.border-style-item[data-text=dotted]::before {
	border-bottom-style: dotted
}

.C_selectBox {
	float: left;
	position: relative;
	cursor: pointer;
	color: #fff;
	font-size: 12px;
	width: 130px;
	height: 26px;
	line-height: 28px;
	border-radius: 4px;
	border: 1px solid #cdcdcf;
	background: #2f2f36;
	line-height: 26px;
	z-index: 1;
	-webkit-user-select: none;
	user-select: none
}

.C_selectBox span {
	display: block;
	text-indent: 10px;
	padding-right: 20px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis
}

.C_selectBox.blank {
	cursor: default
}

.C_selectBox:not (.blank )::after {
	content: '';
	position: absolute;
	top: 9px;
	right: 9px;
	width: 12px;
	height: 7px;
	background-image: url(/images/new_images-c2d60a779f.png);
	background-size: 1000px auto;
	background-position: -28px -63px;
	-webkit-transition: -webkit-transform .25s
}

.C_selectBox.on:not (.blank )::after {
	-webkit-transform: rotateZ(-180deg)
}

.C_selectBox.simple {
	width: auto;
	height: 22px;
	border: none;
	background: 0 0;
	line-height: 22px;
	color: #fff;
	margin-left: 0;
	max-width: 80px
}

.C_selectBox.simple:not (.blank )::after {
	top: 1px;
	right: 0;
	width: 20px;
	height: 20px;
	background-position: -23px -57px
}

.C_selectBox.white {
	font-size: 14px;
	height: 45px;
	border: none;
	background: #fff;
	line-height: 45px
}

.C_selectBox.white span {
	text-indent: 15px;
	color: #505050
}

.C_selectBox.white:not (.blank )::after {
	top: 19px;
	right: 15px
}

.C_selectBox.across span {
	padding-right: 10px
}

.C_selectBox.across::after {
	content: none
}

.dropdownBox {
	position: absolute;
	border: 1px solid #fff;
	border-radius: 4px;
	background: #2c2c32;
	color: #fff;
	font-size: 12px;
	cursor: pointer;
	z-index: 102;
	overflow: hidden
}

.dropdownBox.drop-has-search {
	padding-top: 32px
}

.dropdownBox .drop-box-search {
	position: absolute;
	height: 32px;
	width: 100%;
	background: #2c2c32;
	top: 0
}

.dropdownBox .drop-box-search>input {
	width: calc(100% - 12px);
	margin: 0 6px;
	color: #fff;
	border-bottom: 1px solid #f56464;
	background: 0 0;
	text-indent: 16px;
	text-align: left;
	line-height: 32px;
	font-size: 13px
}

.dropdownBox .drop-box-search .search-icon {
	position: absolute;
	display: block;
	width: 12px;
	height: 12px;
	background-position: -260px -205px;
	background-image: url(/images/new_images-c2d60a779f.png);
	background-size: 1000px 1000px;
	left: 6px;
	top: 10px
}

.dropdownBox li {
	height: 32px;
	line-height: 32px;
	cursor: pointer;
	padding: 0 10px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis
}

.dropdownBox li.active {
	background: rgba(245, 100, 100, .3)
}

.dropdownBox li:hover {
	background: rgba(245, 100, 100, .7)
}

.dropdownBox.white {
	color: #505050;
	background: #fff;
	border: none;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .3)
}

.dropdownBox.white li {
	height: 40px;
	line-height: 40px;
	border: none;
	padding: 0 15px;
	font-size: 14px
}

.dropdownBox.white li:hover {
	background: rgba(0, 0, 0, .05)
}

#setSelect.C_selectBox {
	margin-top: 0;
	background: 0 0
}

#controlSetting>span, .cancelBtn, .redBtn {
	position: relative;
	float: left;
	width: 58px;
	height: 30px;
	background-color: #c73e3e;
	border-radius: 4px;
	line-height: 30px;
	font-size: 14px;
	color: #fff;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
	margin: 10px 6px 0 6px;
	text-align: center;
	cursor: pointer
}

.redBtn.disabled {
	background: #ddd;
	color: #666;
	text-shadow: none;
	cursor: default
}

.redBtn.disabled:active {
	background: #ddd
}

.cancelBtn {
	text-align: center;
	margin-left: 90px;
	margin-bottom: 20px;
	background: #f2f2f2;
	text-shadow: none;
	color: #505050
}

.cssTextarea, .htmlTextarea, .importTextarea {
	width: 380px;
	height: 300px;
	font-size: 14px;
	padding: 10px;
	border: none;
	background: rgba(0, 0, 0, .3);
	border-radius: 4px;
	box-shadow: 0 1px 1px rgba(0, 0, 0, .25) inset;
	color: #fff;
	margin: 0 0 10px 10px;
	resize: none
}

.cssTextarea.pageNameInput {
	height: 25px;
	width: 580px;
	margin: 0
}

.iconBtn {
	width: 25px;
	height: 25px;
	cursor: pointer
}

.drop-menu-parent {
	position: relative
}

.drop-menu-parent:hover .drop-menu-box {
	display: block
}

#structList>li:hover {
	z-index: 1
}

.drop-menu-parent {
	position: relative
}

.drop-menu-parent:hover .drop-menu-box {
	display: block
}

.drop-menu-box {
	position: absolute;
	padding-top: 10px;
	margin-top: 20px;
	display: none;
	text-align: left
}

.drop-menu-box:hover {
	display: block
}

.drop-menu-box::before {
	content: "";
	position: absolute;
	top: 5px;
	left: 20px;
	transform: translateX(-6px);
	border-width: 0 6px 6px;
	border-style: solid;
	border-color: transparent transparent #000;
	z-index: 10;
	opacity: .9
}

.drop-menu-box::after {
	content: "";
	position: absolute;
	top: 3px;
	transform: translateX(-8px);
	border-width: 0 8px 8px;
	border-style: solid;
	border-color: transparent transparent #eee;
	z-index: 0;
	opacity: .9
}

.drop-menu-box.dir-right:before {
	left: 80px
}

.drop-menu-box.dir-right:after {
	left: 80px
}

.drop-menu-box.dir-mid:before {
	left: 50%
}

.drop-menu-box.dir-mid:after {
	left: 50%
}

.drop-menu-box.width-auto ul {
	width: auto
}

.drop-menu-box ul {
	padding: 2px 0;
	width: 100px;
	color: #fff;
	border-radius: 4px;
	background: rgba(0, 0, 0, .9);
	border: 1px #fff solid;
	z-index: 100
}

.drop-menu-box li {
	position: relative;
	margin: 4px 10px;
	font-size: 13px;
	height: 28px;
	line-height: 28px;
	white-space: nowrap;
	width: auto
}

.drop-menu-box li:not (:last-child ){
	border-bottom: 1px solid rgba(255, 255, 255, .7)
}

.drop-menu-box li:hover {
	font-weight: 700
}

.drop-menu-box li a, .drop-menu-box li span:not (.new-msg-num ){
	width: 100%;
	color: inherit;
	line-height: 28px;
	display: inline-block
}

.drop-menu-box.up {
	transform: translateY(calc(-100% - 10px));
	padding-top: 0;
	padding-bottom: 7px
}

.drop-menu-box.up::before {
	top: auto;
	bottom: 2px;
	transform: translateX(-4px) rotate(180deg)
}

.drop-menu-box.up::after {
	transform: translateX(-6px) rotate(180deg);
	bottom: 0;
	top: auto
}

.iconBtn {
	width: 25px;
	height: 25px;
	cursor: pointer
}

.rightPanel .labelBox {
	left: -40px
}

.rightPanel .tabLabel {
	margin-left: 5px;
	transition: width .2s, margin-left .2s
}

.rightPanel .tabLabel.active {
	border-right: 1px solid rgba(60, 60, 70, .98);
	margin-left: 0
}

.rightPanel .tabLabel span {
	margin-left: 11px
}

.rightPanel .tabLabel:last-child {
	border-bottom-left-radius: 4px
}

.leftPanel .labelBox {
	right: -40px
}

.leftPanel .tabLabel {
	float: right;
	margin-right: 5px;
	transition: width .2s, margin-right .2s
}

.leftPanel .tabLabel.active {
	border-left: 1px solid rgba(60, 60, 70, .98);
	margin-right: 0
}

.leftPanel .tabLabel span {
	float: right;
	margin-right: 11px
}

.leftPanel .tabLabel:last-child {
	border-bottom-right-radius: 4px
}

.leftPanel .tabLabel::after {
	left: auto;
	right: 0
}

.allPanel {
	transition: -webkit-filter .3s
}

.copied-tips {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background: rgba(0, 0, 0, .8);
	text-align: center;
	width: 80px;
	height: 25px;
	line-height: 22px;
	border-radius: 4px;
	text-indent: 0;
	display: none;
	pointer-events: none;
	font-size: 14px
}

.copied-tips.show {
	display: block
}

.edit-panel #structList.catalog-list {
	top: 0
}

.edit-panel.catalog-list-show #structList.catalog-list {
	top: 35px
}

.catalog-list {
	position: absolute;
	top: 35px;
	bottom: 0;
	color: #fff;
	font-size: 13px;
	overflow-y: scroll;
	right: 0;
	width: 170px;
	overflow-x: hidden
}

.catalog-list .back-btn {
	border-bottom: 1px dashed #666;
	line-height: 35px;
	height: 35px;
	text-indent: 35px;
	width: 100%;
	cursor: pointer;
	transition: color .1s
}

.catalog-list .back-btn:hover {
	color: #f56464
}

.catalog-list .back-btn i {
	position: absolute;
	line-height: 35px;
	font-size: 20px;
	left: -25px
}

.catalog-list .catalog-wrapper {
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, .1);
	border-left: 1px solid #000;
	transform: translateX(100%);
	transition: transform .3s
}

.catalog-list>li {
	line-height: 30px;
	font-size: 12px;
	position: relative;
	height: 30px
}

.catalog-list>li:nth-child(2n) {
	background: rgba(255, 255, 255, .03)
}

.catalog-list>li.select {
	box-shadow: 0 0 0 1px #f56464 inset
}

.catalog-list>li.isSelect:nth-child(odd) {
	background: rgba(245, 100, 100, .3)
}

.catalog-list>li.isSelect:nth-child(even) {
	background: rgba(245, 100, 100, .3)
}

.catalog-list>li:hover {
	background: rgba(245, 100, 100, .1) !important
}

.catalog-list>li:hover .toolbar i {
	display: inline-block
}

.catalog-list>li.layer-2 .name {
	margin-left: 32px
}

.catalog-list>li.layer-3 .name {
	margin-left: 48px
}

.catalog-list>li.layer-4 .name {
	margin-left: 64px
}

.catalog-list>li.layer-5 .name {
	margin-left: 80px
}

.catalog-list>li.layer-6 .name {
	margin-left: 96px
}

.catalog-list>li.layer-7 .name {
	margin-left: 112px
}

.catalog-list>li.layer-8 .name {
	margin-left: 128px
}

.catalog-list>li.unfold .unfold-btn::before {
	transform: rotate(90deg)
}

.catalog-list>li.unfold .wrapbox-line {
	display: block
}

.catalog-list>li.unfold:hover .unfold-btn::before {
	border-left: 5px solid #f56464
}

.catalog-list>li.unfold:hover .wrapbox-line {
	background: #f56464
}

.catalog-list>li.unfold:hover .wrapbox-line::after {
	background: #f56464
}

.catalog-list .text-layer .name::before {
	background-position: -28px -471px
}

.catalog-list .inputText-layer .name::before {
	background-position: -108px -451px
}

.catalog-list .roundRect-layer .name::before {
	background-position: -88px -451px
}

.catalog-list .round-layer .name::before {
	background-position: -148px -451px
}

.catalog-list .square-layer .name::before {
	background-position: -68px -451px
}

.catalog-list .rect-layer .name::before {
	background-position: -48px -451px
}

.catalog-list .advanced-layer .name::before {
	background-position: -88px -511px
}

.catalog-list .map-layer .name::before {
	background-position: -2px -711px
}

.catalog-list .audio-layer .name::before {
	background-position: -62px -711px
}

.catalog-list .video-layer .name::before {
	background-position: -82px -711px
}

.catalog-list .webPage-layer .name::before {
	background-position: -22px -711px
}

.catalog-list .chart-layer .name::before {
	background-position: -107px -511px
}

.catalog-list .vLine-layer .name::before {
	background-position: -8px -471px
}

.catalog-list .hLine-layer .name::before {
	background-position: -188px -451px
}

.catalog-list .icon-layer .name::before {
	background-position: -48px -471px
}

.catalog-list .symbol-layer .name::before {
	background-position: -945px -5px
}

.catalog-list .table-layer .name::before {
	background-position: -108px -491px
}

.catalog-list .image-layer .name::before {
	background-position: -8px -451px
}

.catalog-list .wrapbox-layer .name::before {
	background-position: -28px -451px
}

.catalog-list .hotspot-layer .name::before {
	background-position: -128px -451px
}

.catalog-list .interface-layer .name::before, .catalog-list .page-layer .name::before
	{
	background-position: -8px -491px
}

.catalog-list .folder-layer .name::before {
	background-position: -168px -471px
}

.catalog-list .interface-layer .name {
	margin-left: 24px
}

.catalog-list .name {
	margin-left: 16px;
	position: relative;
	display: inline-block;
	text-indent: 18px;
	cursor: default
}

.catalog-list .name::before {
	content: '';
	position: absolute;
	left: 0;
	top: 7px;
	width: 15px;
	height: 15px;
	background-image: url(/images/new_images-c2d60a779f.png);
	background-size: 1000px auto
}

.catalog-list .is-edit-pageflow-struct .name::before {
	content: none
}

.catalog-list .toolbar {
	position: absolute;
	right: 2px;
	top: 0;
	height: 30px
}

.catalog-list .toolbar i {
	line-height: 32px;
	font-size: 15px;
	margin-right: 3px;
	cursor: pointer;
	display: none
}

.catalog-list .toolbar i:hover {
	display: inline-block;
	color: #f56464
}

.catalog-list .unfold-btn {
	position: absolute;
	left: -10px;
	top: 5px;
	padding: 10px 5px;
	cursor: pointer;
	pointer-events: auto
}

.catalog-list .unfold-btn::before {
	content: '';
	width: 0;
	height: 0;
	position: absolute;
	right: 8px;
	top: 14px;
	border-left: 6px solid #666;
	left: 0;
	top: 7px;
	border-top: 4px solid transparent;
	border-left: 5px solid #fff;
	border-bottom: 4px solid transparent
}

.catalog-list .wrapbox-line {
	position: absolute;
	width: 1px;
	background: rgba(255, 255, 255, .1);
	left: 2px;
	top: 10px;
	display: none
}

.catalog-list .wrapbox-line::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: -2px;
	border-radius: 50%;
	width: 5px;
	height: 5px;
	background: rgba(255, 255, 255, .3)
}

.new-msg-num {
	background: #e12323;
	height: 18px;
	min-width: 12px;
	color: #fff;
	font-size: 12px;
	border-radius: 9px;
	text-align: center;
	line-height: 18px !important;
	padding: 0 3px
}

.searchTextBox {
	color: #fff
}

.searchTextBox .cancelSearch {
	margin-left: 20px;
	text-decoration: underline;
	font-size: 14px;
	color: #ff6464;
	cursor: pointer
}

.redspan {
	color: #f56464
}

.click-text {
	color: #c33e3e;
	cursor: pointer;
	font-weight: 700
}

.C_selectBox.search-select {
	margin: 5px 0 0 2px
}

.notification-menu.dir-mid::before {
	left: 270px
}

.notification-menu.dir-mid::after {
	left: 270px
}

.notification-menu ul {
	width: 335px;
	height: 40px
}

.notification-menu li {
	float: left;
	width: 28px;
	height: 28px;
	margin: 5px 0 0 7px
}

.notification-menu li:not (:last-child ){
	border: 0
}

.notification-menu li:nth-child(7) {
	margin-left: 20px
}

.notification-menu li:nth-child(7)::after {
	content: '';
	position: absolute;
	top: 4px;
	left: -10px;
	width: 1px;
	height: 20px;
	background: #aaa
}

.notification-menu a {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	transition: background-color .1s;
	display: inline-block
}

.notification-menu a:hover {
	background-color: #fff
}

.notification-menu .like {
	background-position: 0 -416px
}

.notification-menu .like:hover {
	background-position: -232px -416px
}

.notification-menu .download {
	background-position: -29px -416px
}

.notification-menu .download:hover {
	background-position: -261px -416px
}

.notification-menu .quote {
	background-position: -58px -416px
}

.notification-menu .quote:hover {
	background-position: -290px -416px
}

.notification-menu .follower {
	background-position: -87px -416px
}

.notification-menu .follower:hover {
	background-position: -319px -416px
}

.notification-menu .message {
	background-position: -116px -416px
}

.notification-menu .message:hover {
	background-position: -348px -416px
}

.notification-menu .notice {
	background-position: -145px -416px
}

.notification-menu .notice:hover {
	background-position: -377px -416px
}

.notification-menu .postLike {
	background-position: -174px -416px
}

.notification-menu .postLike:hover {
	background-position: -406px -416px
}

.notification-menu .postComment {
	background-position: -203px -416px
}

.notification-menu .postComment:hover {
	background-position: -435px -416px
}

.notification-menu .commentReply {
	background-position: -467px -416px
}

.notification-menu .commentReply:hover {
	background-position: -497px -416px
}

.notification-menu .new-msg-num {
	position: absolute;
	top: -3px;
	right: -7px
}

a.pointer {
	cursor: pointer
}

.no-pointer {
	cursor: default !important
}

.float-figure figure {
	float: left;
	width: 100%
}

.load-container {
	display: table;
	margin: 41px auto;
	position: relative
}

.load-container>span {
	font-size: 14px;
	color: rgba(255, 255, 255, .4);
	padding-left: 22px
}

.load-container>.load {
	position: absolute;
	top: 4px;
	left: 0;
	width: 14px;
	height: 14px;
	border: 1px solid grey;
	border-top: 1px solid pink;
	border-radius: 50%;
	animation: loading 1.2s infinite linear
}

@
keyframes loading {
	from {transform: rotate(0)
}

to {
	transform: rotate(360deg)
}

}
.contentBox {
	position: absolute;
	right: 0;
	top: 0;
	width: 6px;
	height: 100%
}

.contentBox.scroll-drag, .contentBox:hover {
	width: 12px
}

.contentBox.scroll-drag .scrollBar, .contentBox:hover .scrollBar {
	width: 10px;
	border-radius: 10px
}

.contentBox.vertical-scroll {
	position: absolute;
	left: 0;
	top: -6px;
	width: 100%;
	height: 6px
}

.contentBox.vertical-scroll .scrollBar {
	width: 80px;
	height: 5px;
	right: auto;
	bottom: 2px
}

.contentBox.vertical-scroll.scroll-drag, .contentBox.vertical-scroll:hover
	{
	top: -12px;
	height: 12px
}

.contentBox.vertical-scroll.scroll-drag .scrollBar, .contentBox.vertical-scroll:hover .scrollBar
	{
	height: 10px;
	border-radius: 10px
}

.contentBox:hover {
	background: rgba(0, 0, 0, .1)
}

.contentBox .scrollBar {
	position: absolute;
	width: 5px;
	height: 80px;
	right: 0;
	margin: 0 auto;
	background: #f56464;
	opacity: .8;
	border-radius: 5px;
	cursor: pointer
}

.mobile-model {
	position: absolute;
	width: 354px;
	height: 755px;
	border-radius: 50px;
	background: #f2f2f2;
	top: -94px;
	left: -16px;
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .35)
}

.mobile-model .power-button {
	position: absolute;
	width: 63px;
	height: 6px;
	top: -7px;
	right: 58px;
	background: #f2f2f2;
	border-radius: 4px 4px 0 0
}

.mobile-model .camera {
	width: 13px;
	height: 13px;
	margin: 22px 0 0 50%;
	transform: translateX(-50%);
	border-radius: 50%;
	background: #444
}

.mobile-model .handset {
	width: 59px;
	height: 9px;
	margin: 15px 0 0 50%;
	transform: translateX(-50%);
	border-radius: 5px;
	background: #ccc
}

.mobile-model .volume-button-group {
	position: absolute;
	top: 68px;
	left: -6px
}

.mobile-model .volume-button-group li {
	width: 5px;
	height: 38px;
	border-radius: 4px 0 0 4px;
	background: #f2f2f2;
	margin-top: 25px
}

.mobile-model .home-button {
	position: absolute;
	width: 68px;
	height: 68px;
	background: #f7f7f7;
	border-radius: 50%;
	bottom: 13px;
	margin-left: 50%;
	transform: translateX(-50%);
	border: 1px solid #eee
}

.mobile-model .home-button:after {
	content: '';
	position: absolute;
	top: 21px;
	left: 21px;
	border: 2px solid #ccc;
	width: 23px;
	height: 23px;
	border-radius: 4px
}

.landscape .mobile-model {
	transform: rotate(-90deg)
}

.sub-search {
	position: absolute;
	right: 0;
	top: 0;
	width: 150px;
	color: #fff;
	background: rgba(140, 140, 140, .6);
	border-radius: 16px;
	height: 32px;
	-webkit-transition: width .5s, background .5s;
	text-align: left
}

.sub-search:not (.no-before ):before {
	content: '';
	position: absolute;
	width: 20px;
	height: 20px;
	right: 12px;
	top: 6px;
	background: url(/images/loginImages-7d939ed7c7.png);
	background-position: -332px -28px
}

.sub-search .search-btn {
	position: absolute;
	width: 20px;
	height: 20px;
	right: 12px;
	top: 6px;
	background: url(/images/loginImages-7d939ed7c7.png);
	background-position: -332px -28px;
	cursor: pointer;
	z-index: 1
}

.sub-search input {
	position: absolute;
	height: 32px;
	width: 100%;
	line-height: 32px;
	background: 0 0;
	text-indent: 15px;
	font-size: 12px;
	color: #fff
}

.sub-search input::-webkit-input-placeholder {
	color: #ccc
}

.sub-search.active {
	width: 250px;
	background: rgba(210, 210, 210, .8)
}

.sub-search.active input {
	color: #333
}

.sub-search.active input::-webkit-input-placeholder {
	color: #fff
}

#reactBox .allPanel:not (.pc-app ).has-footer {
	padding-bottom: 356px
}

#reactBox footer {
	position: absolute;
	bottom: 0
}

footer {
	position: relative;
	width: 100%;
	display: flex;
	height: 356px;
	justify-content: center;
	color: #fff;
	background: #1d1d22;
	cursor: default;
	text-align: center
}

footer .base-logo {
	width: 153px;
	height: 22px;
	background: url(/images/footerIcons-ffedcf43f7.png);
	background-size: 500px 500px;
	background-position: 0 0;
	margin: 60px 150px 0 0
}

footer .baseList {
	width: 200px;
	height: 201px;
	margin-right: 20px;
	margin-top: 60px;
	text-align: left
}

footer .baseList .baseTitle {
	height: 18px;
	line-height: 18px;
	font-size: 18px;
	margin-bottom: 28px
}

footer .baseList .baseMenu {
	display: table;
	height: 15px;
	line-height: 15px;
	font-size: 15px;
	margin-bottom: 20px;
	color: rgba(255, 255, 255, .6);
	cursor: pointer
}

footer .baseList .baseMenu:hover {
	color: rgba(255, 255, 255, .8)
}

footer .contact {
	width: 239px;
	height: 152px
}

footer .contact .contact-email {
	margin-bottom: 18px
}

footer .contact .contact-img {
	position: relative;
	display: inline-block;
	width: 24px;
	height: 24px;
	background: url(/images/footerIcons-ffedcf43f7.png);
	background-size: 500px 500px
}

footer .contact .contact-img .qrcode-box {
	position: absolute;
	bottom: 10px;
	left: -60px;
	padding-bottom: 30px;
	opacity: 0;
	transform: translateY(40px);
	transition: all .3s;
	pointer-events: none
}

footer .contact .contact-img .qrcode {
	background: #fff;
	border-radius: 4px;
	padding: 10px;
	color: #c73e3e;
	font-size: 13px
}

footer .contact .contact-img p {
	margin-top: 5px;
	height: 15px;
	line-height: 15px
}

footer .contact .contact-img .qrcode-img {
	width: 120px;
	height: 120px;
	background: url(/images/qq-qrcode-3a93f779c6.png);
	background-size: 120px
}

footer .contact .contact-img:hover {
	cursor: pointer
}

footer .contact .contact-img:hover .qrcode-box {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto
}

footer .contact .contact-qq {
	background-position: 0 -40px;
	margin-right: 12px
}

footer .contact .contact-wechat {
	background-position: -40px -40px
}

footer .contact .contact-wechat:hover .qrcode-img {
	background: url(/images/wechat-qrcode-29af73fc7e.png)
}

footer .base-footer {
	position: absolute;
	height: 13px;
	line-height: 13px;
	font-size: 13px;
	bottom: 24px;
	left: 0;
	right: 0;
	margin: 0 auto;
	color: rgba(255, 255, 255, .4)
}

.customer-service {
	position: fixed;
	bottom: 120px;
	right: 50px;
	z-index: 1;
	transition: bottom .2s
}

.customer-service.is-backTopShow {
	bottom: 52px
}

.customer-service .customer-service-img {
	position: relative;
	width: 48px;
	height: 48px;
	border-radius: 48px;
	background-color: rgba(245, 100, 100, .6)
}

.customer-service .customer-service-img::after {
	content: '';
	position: absolute;
	width: 22px;
	height: 21px;
	left: 13px;
	top: 14px;
	background: url(/images/footerIcons-ffedcf43f7.png);
	background-size: 500px 500px;
	background-position: -50px -80px;
	opacity: .8
}

.customer-service .customer-service-img:hover::after {
	opacity: 1
}

.customer-service .customer-service-img:hover .customer-box {
	display: block
}

.customer-service .customer-box-hover {
	position: absolute;
	width: 334px;
	left: -285px;
	top: -95px
}

.customer-service .customer-box-hover:hover .customer-box {
	display: block
}

.customer-service .customer-box-hover .customer-box {
	display: none;
	width: 268px;
	height: 142px;
	border-radius: 8px;
	color: #fff;
	background: #3d3d42;
	cursor: default;
	box-shadow: 0 2px 4px rgba(0, 0, 0, .5)
}

.customer-service .customer-menu {
	position: relative;
	width: 268px
}

.customer-service .customer-menu::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 20px;
	width: 228px;
	border: 1px solid rgba(255, 255, 255, .05)
}

.customer-service .customer-menu:last-child::after {
	content: none
}

.customer-service .customer-menu .link-title {
	height: 13px;
	line-height: 13px;
	font-size: 13px;
	color: rgba(255, 255, 255, .5);
	padding: 16px 0 12px 20px
}

.customer-service .customer-menu .linkPhone-title {
	padding-top: 20px
}

.customer-service .customer-menu .link-text {
	height: 14px;
	line-height: 14px;
	font-size: 14px;
	padding: 0 0 16px 20px
}

.customer-service .customer-menu .opinion-text {
	padding: 24px 0 27px 20px
}

.customer-service .customer-menu .link-btn {
	position: absolute;
	right: 20px;
	width: 91px;
	height: 28px;
	font-size: 13px;
	border: 1px solid #f56464;
	border-radius: 4px;
	color: #f56464;
	background: #3d3d42;
	cursor: pointer;
	line-height: 26px;
	text-align: center
}

.customer-service .customer-menu .link-btn:hover {
	color: #fff;
	background: #f56464
}

.customer-service .customer-menu .linkQQ-btn {
	top: 22px
}

.customer-service .customer-menu .opinion-btn {
	top: 16px
}

.social-group {
	display: inline-block;
	vertical-align: top;
	margin-left: 8px;
	line-height: 0
}

.social-group .qrcode-box {
	position: absolute;
	left: -60px;
	bottom: 27px;
	padding-bottom: 15px;
	opacity: 0;
	transform: translateY(40px);
	transition: all .3s;
	pointer-events: none
}

.social-group .qrcode {
	background: #fff;
	border-radius: 4px;
	padding: 10px;
	color: #c73e3e;
	font-size: 13px
}

.social-group p {
	margin-top: 5px
}

.social-item {
	display: inline-block;
	margin: 12px 0 0 10px;
	cursor: pointer;
	position: relative;
	line-height: 1.5
}

.social-item .qrcode-img {
	width: 120px;
	height: 120px;
	background: url(/images/qq-qrcode-3a93f779c6.png)
}

.social-item i {
	display: block;
	width: 24px;
	height: 24px;
	background-position: -880px -15px;
	opacity: .8
}

.social-item.wechat i {
	background-position: -911px -15px
}

.social-item.wechat .qrcode-img {
	background: url(/images/wechat-qrcode-29af73fc7e.png)
}

.social-item:hover i {
	opacity: 1
}

.social-item:hover .qrcode-box {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto
}

.social-item:hover.qq i {
	background-position: -942px -15px
}

.social-item:hover.wechat i {
	background-position: -973px -15px
}

#cancelLibBtn, #createLibBtn {
	float: left;
	margin-top: 2px;
	margin-left: 10px;
	background-position: -206px -6px
}

#cancelLibBtn:hover, #createLibBtn:hover {
	background-position: -173px -6px
}

input.createLib {
	float: left;
	margin-left: 5px;
	line-height: 28px;
	color: #fff;
	font-size: 13px;
	text-indent: 10px;
	border: none;
	background: rgba(0, 0, 0, .3);
	border-radius: 4px;
	box-shadow: 0 1px 1px rgba(0, 0, 0, .25) inset;
	width: 132px
}

input.createLib.noLib {
	width: 200px
}

#cancelLibBtn {
	transform: rotate(45deg)
}

.browser-warning {
	position: fixed;
	width: 100%;
	height: 60px;
	line-height: 60px;
	text-align: center;
	bottom: 0;
	left: 0;
	background: rgba(199, 62, 62, .85);
	color: #fff;
	z-index: 10000
}

.browser-warning p {
	display: inline-block
}

.browser-warning .base-hollow-btn {
	margin-left: 20px;
	font-size: 14px;
	display: inline-block
}

.browser-warning.mobile-warning {
	height: 300px;
	font-size: 40px
}

.browser-warning.mobile-warning p {
	width: 100%;
	margin-top: 20px
}

.browser-warning.mobile-warning .base-hollow-btn {
	font-size: 40px;
	line-height: 80px;
	height: 80px;
	margin-left: 0;
	margin-top: 30px;
	border: 2px solid #fff;
	padding: 0 50px
}

.labelBox {
	position: absolute;
	top: 0;
	width: 40px
}

.invisible {
	visibility: hidden
}

.phone-view-mask .flowplayer.is-error {
	background-color: rgba(0, 0, 0, .5)
}

.share-popup .share-left {
	position: relative;
	float: left;
	width: 200px;
	height: 200px;
	padding: 10px 0
}

.share-popup .share-left:after {
	content: '';
	position: absolute;
	top: -30px;
	right: 0;
	width: 1px;
	height: 100%;
	padding: 30px 0;
	background: #999
}

.share-popup .share-right {
	float: left;
	display: flex;
	align-items: center;
	padding: 0 0 0 25px;
	height: 220px
}

.share-popup .permission-checkbox {
	float: left;
	margin-top: 10px;
	position: relative
}

.share-popup .permission-option {
	margin-top: 32px;
	opacity: .6;
	cursor: pointer
}

.share-popup .permission-option:first-child {
	margin-top: 0
}

.share-popup .permission-option.active {
	opacity: 1
}

.share-popup .permission-option.active .permission-checkbox:after {
	content: 'check_circle';
	color: #39c55f
}

.share-popup .permission-option:not (.active ) .permission-checkbox:after
	{
	content: '';
	position: absolute;
	left: 2px;
	top: 2px;
	border-radius: 100%;
	border: 2px solid #fff;
	width: 20px;
	height: 20px;
	box-sizing: border-box
}

.share-popup .permission-item-info {
	float: left;
	margin-left: 10px
}

.share-popup .permission-name {
	font-size: 16px;
	line-height: 24px
}

.share-popup .permission-desc {
	font-size: 12px;
	color: #ddd;
	width: 150px
}

.share-popup .operate-select {
	margin-left: 0
}

.share-popup .publish-square-btn {
	float: left;
	height: 26px;
	line-height: 26px;
	margin: 0 0 2px 10px;
	padding: 0 15px
}

.share-popup input {
	font-size: 13px;
	line-height: 15px
}

.share-popup .copy-link-btn {
	float: left;
	position: relative;
	cursor: copy
}

.share-popup .base-btn {
	width: 80px;
	line-height: 34px;
	margin-left: 10px;
	height: 34px
}

.share-popup .qrcode-box {
	margin-top: 15px;
	position: relative
}

.share-popup .qrcode-box .img-box {
	float: left;
	width: 107px;
	height: 107px;
	overflow: hidden;
	border-radius: 2px
}

.share-popup .qrcode-box img {
	margin: -4px 0 0 -4px;
	width: 115px;
	height: 115px
}

.share-popup .qrcode-box p {
	float: left;
	font-size: 14px;
	line-height: 107px;
	margin-left: 15px
}

.share-popup .qrcode-box .copied-tips {
	font-size: 14px;
	left: 17px;
	transform: translate(0, -50%)
}

.share-popup .proj-pwd-box span {
	font-size: 14px;
	line-height: 28px
}

.share-popup .proj-pwd-box ~.proj-link-box {
	margin-top: 15px
}

.share-popup .pwd-input {
	margin-left: 10px;
	height: 10px;
	width: 60px
}

.share-popup.no-setting .share-left {
	display: none
}

.share-popup.no-setting .share-right {
	float: none;
	padding: 0;
	height: auto
}

.share-popup.no-setting .proj-link-box {
	margin-top: 0
}

.share-popup.no-setting .link-input {
	width: 350px
}

.share-popup.no-setting .qrcode-box {
	text-align: center
}

.share-popup.no-setting .qrcode-box .img-box {
	float: none;
	display: inline-block
}

.share-popup.no-setting .qrcode-box p {
	float: none;
	line-height: 1.8;
	margin-left: 0
}

.share-popup.no-setting .qrcode-box .copied-tips {
	top: 60px;
	left: 50%;
	transform: translate(-50%, -50%)
}

.share-popup.no-setting.permission-public .proj-link-box {
	margin-top: 0
}

.share-popup.share-lib .permission-option:first-child {
	margin-top: 35px
}

.share-popup .password-set-box span {
	font-size: 14px
}

.share-popup .password-set-box .pwd-set-input {
	width: 100px
}

.share-popup .password-set-box .save-pwd-btn {
	float: right
}

.share-popup.permission-public .proj-link-box {
	margin-top: 15px
}

.share-popup .share-prd-checkbox {
	margin-top: 5px
}

.link-input {
	float: left;
	width: 260px
}

.no-setting .link-input {
	width: 350px
}

.cooperator-popup .invite-btn {
	margin: 20px 0 -5px 0
}

.cooperators-list {
	min-height: 190px;
	max-height: calc(100vh - 300px);
	overflow: scroll
}

.cooperators-list li {
	font-size: 14px;
	line-height: 25px;
	position: relative;
	margin-top: 6px
}

.cooperators-list li:first-child {
	margin-top: 0
}

.cooperators-list li img {
	width: 25px;
	height: 25px;
	border-radius: 100%
}

.cooperators-list li span {
	vertical-align: top
}

.cooperators-list li .user-name {
	margin-left: 15px
}

.cooperators-list li .user-email {
	position: absolute;
	left: 247px;
	top: 0;
	color: #999
}

.cooperators-list li .create-user {
	float: right;
	color: #999
}

.cooperators-list .operate-btn {
	float: right;
	cursor: pointer;
	margin-right: 8px;
	position: relative
}

.cooperators-list .operate-btn:after {
	content: 'add_circle_outline';
	color: #fff
}

.cooperators-list .operate-btn.invited::after {
	content: 'check_circle';
	color: #39c55f
}

.cooperators-list .operate-btn.invited:hover::after {
	content: 'close';
	color: #f56464
}

.invite-popup .search-input {
	width: 580px;
	margin-bottom: 15px
}

.invite-popup .latest-label {
	font-size: 12px;
	line-height: 2.5;
	border-bottom: 1px solid #999
}

.invite-popup .cooperators-list {
	margin-top: 15px
}

.invite-popup .invite-result-text {
	font-size: 14px
}

.cooperators-num {
	cursor: pointer;
	font-size: 13px;
	white-space: nowrap
}

.cooperators-num i {
	width: 20px;
	height: 15px;
	background-position: -900px -95px;
	display: inline-block
}

.cooperators-num:not (.in-header ):hover i {
	background-position: -100px -227px
}

.cooperators-num:not (.in-header ):hover span {
	color: #f56464
}

.cooperators-num span {
	margin-left: 2px
}

.cooperators-num.small i {
	width: 15px;
	height: 13px;
	background-position: -132px -228px
}

.cooperators-num.small:hover i {
	background-position: -162px -228px
}

.icon-img.more {
	padding-bottom: 10px;
	background-position: -367px -74px
}

.icon-img.more:hover {
	background-position: -390px -74px
}

.icon-img.more:hover .drop-menu-box {
	display: block
}

.export-popup {
	text-align: center;
	padding: 50px 0 80px 0
}

.export-popup .export-format {
	width: 90px;
	height: 90px;
	background: url(/images/exportIcon-70752c9d41.png) no-repeat;
	background-size: 450px 180px;
	display: inline-block;
	margin: 0 30px;
	position: relative;
	cursor: pointer;
	opacity: .8
}

.export-popup .export-format span {
	position: absolute;
	left: 0;
	bottom: -25px;
	white-space: nowrap;
	width: 100%;
	text-align: center;
	font-size: 14px
}

.export-popup .export-format:hover {
	opacity: 1;
	background: url(/images/exportIcon-70752c9d41.png) no-repeat;
	background-size: 450px 180px;
	background-position: 0 -90px
}

.export-popup .export-format:hover.pages-zip {
	background-position: -90px -90px
}

.export-popup .export-format:hover.htmls-zip {
	background-position: -180px -90px
}

.export-popup .export-format:hover.free-view {
	background-position: -270px -90px
}

.export-popup .export-format:hover.fixed-view {
	background-position: -360px -90px
}

.export-popup .pages-zip {
	background-position: -90px 0
}

.export-popup .htmls-zip {
	background-position: -180px 0
}

.export-popup .free-view {
	background-position: -270px 0
}

.export-popup .fixed-view {
	background-position: -360px 0
}

.single-page-popup .file-name {
	line-height: 35px
}

.single-page-popup .file-name-input {
	width: 350px;
	height: auto;
	line-height: 15px
}

.single-page-popup .popup-item-title {
	width: 85px;
	text-align: right;
	white-space: nowrap
}

.single-page-popup .C_selectBox {
	margin-left: 0
}

.single-page-popup .checkBox {
	margin: 25px 0 0 85px;
	font-size: 13px
}

.phone-view-model .allPanel {
	pointer-events: none;
	-webkit-filter: blur(10px);
	filter: blur(10px)
}

.phone-view-mask {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: rgba(26, 26, 26, .97);
	transition: background .3s;
	z-index: 100;
	-webkit-user-select: none
}

.phone-view-mask .close-btn {
	position: absolute;
	width: 40px;
	height: 40px;
	top: 10px;
	right: 10px;
	background-position: -306px -8px;
	cursor: pointer;
	opacity: .8;
	z-index: 101
}

.phone-view-mask .close-btn:hover {
	opacity: 1
}

.phone-view-mask .logo-box {
	display: none
}

.phone-view-model .phone-view-mask {
	background: rgba(0, 0, 0, .65)
}

.phone-view-iframe {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	border: none;
	transition: transform .2s;
	z-index: 100
}

.phone-view-iframe.video-iframe {
	left: 0;
	top: 0
}

.preview-frame {
	background: #2c2c32
}

.AN .phone-view-iframe, .custom .phone-view-iframe, .ip5 .phone-view-iframe,
	.ip6 .phone-view-iframe, .ip6p .phone-view-iframe {
	box-shadow: 0 0 0 1px #979797
}

.phone-view-box {
	position: fixed;
	margin: auto;
	width: 320px;
	height: 568px;
	top: 45px;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 0;
	transition: left .2s ease-in-out, opacity 10s ease-in-out;
	transition: left .2s ease-in-out, opacity .2s, right .2s ease-in-out;
	opacity: 0
}

.phone-view-box.show {
	opacity: 1
}

.phone-view-box .mainBoxBg {
	opacity: 1
}

.phone-view-box .ipx-status-bar {
	top: 0
}

.model-wrapper {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	transition: transform .2s;
	pointer-events: none
}

.SMs8 .model-wrapper, .XMmix .model-wrapper, .XMmix2 .model-wrapper {
	z-index: 1
}

.operate-wrapper {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	transition: width .2s, height .2s;
	pointer-events: none;
	z-index: 2
}

.operate-wrapper .page-next-btn, .operate-wrapper .page-prev-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 50px;
	height: 100px;
	font-size: 30px;
	text-align: center;
	line-height: 100px;
	color: #fff;
	background-color: rgba(37, 37, 40, .2);
	border-radius: 0 50px 50px 0;
	cursor: pointer;
	transition: background-color .2s, box-shadow .2s;
	z-index: 1;
	pointer-events: auto
}

.operate-wrapper .page-next-btn:hover, .operate-wrapper .page-prev-btn:hover
	{
	background-color: #252528;
	box-shadow: 0 1px 10px rgba(0, 0, 0, .2)
}

.operate-wrapper .page-next-btn:hover .arrow, .operate-wrapper .page-prev-btn:hover .arrow
	{
	opacity: 1
}

.operate-wrapper .arrow {
	display: inline-block;
	width: 20px;
	height: 20px;
	margin-left: -18px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: rotate(45deg);
	opacity: .2;
	transition: opacity .2s
}

.operate-wrapper .page-prev-btn {
	left: -50px;
	transform: translateY(-50%) rotate(180deg)
}

.operate-wrapper .page-next-btn {
	right: -50px
}

.operate-wrapper.web .page-prev-btn {
	left: 0;
	transform: translateY(-50%)
}

.operate-wrapper.web .page-next-btn {
	right: 0;
	transform: translateY(-50%) rotate(180deg)
}

.operate-wrapper.web .arrow {
	transform: rotate(-135deg);
	margin-left: 0;
	opacity: .5
}

.SMs8 .mobile-model {
	width: 384px;
	height: 809px;
	background: url(/images/SMs8-ebfe8f956c.svg);
	background-size: 100% 100%;
	top: -35px;
	left: -11px;
	border-radius: 0;
	box-shadow: none
}

.ip6 .mobile-model {
	width: 436px;
	height: 881px;
	background: url(/images/ip6-41ebfb5917.svg);
	background-size: 100% 100%;
	top: -107px;
	left: -30px;
	border-radius: 0;
	box-shadow: none
}

.ip6p .mobile-model {
	width: 477px;
	height: 973px;
	background: url(/images/ip6p-e0ff87799a.svg);
	background-size: 100% 100%;
	top: -118px;
	left: -30px;
	border-radius: 0;
	box-shadow: none
}

.ipx .mobile-model {
	width: 431px;
	height: 862px;
	top: -69px;
	left: -27px;
	border-radius: 0;
	box-shadow: none;
	background: 0 0
}

.ipx .mobile-model .mobile-image {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: url(/images/ipx-5bda6757e4.svg);
	background-size: 100% 100%
}

.ipx .mobile-model .page-bg {
	position: absolute;
	left: 28px;
	top: 24px;
	width: 377px;
	height: 815px
}

.ipx .mobile-model .indicator {
	position: absolute;
	left: 50%;
	bottom: 9px;
	width: 134px;
	height: 5px;
	transform: translateX(-50%);
	border-radius: 3px;
	background: #000
}

.ipx .mobile-model .indicator.light {
	background: #fff
}

.ipx-status-bar {
	position: absolute;
	left: 0;
	top: -44px;
	width: 100%;
	height: 44px;
	background: url(/images/ipx-dark-status-bar-d6f3a4ee32.svg);
	pointer-events: none
}

.ipx-status-bar.light {
	background: url(/images/ipx-light-status-bar-46d6984e83.svg)
}

.AN .mobile-model {
	width: 387px;
	height: 800px;
	background: url(/images/AN-f9064c493b.svg);
	background-size: 100% 100%;
	top: -77px;
	left: -13px;
	border-radius: 0;
	box-shadow: none
}

.XMmix .mobile-model {
	width: 388px;
	height: 735px;
	background: url(/images/XMmix-0982560f38.svg);
	background-size: 100% 100%;
	top: -7px;
	left: -13px;
	border-radius: 0;
	box-shadow: none
}

.XMmix2 .mobile-model {
	width: 394px;
	height: 783px;
	background: url(/images/XMmix2-3d0d79cbfc.svg);
	background-size: 100% 100%;
	top: -12px;
	left: -16px;
	border-radius: 0;
	box-shadow: none
}

.SMs8 .mainBoxBorder {
	border-radius: 20px
}

.XMmix2 .mainBoxBorder {
	border-radius: 12px
}

.XMmix .mainBoxBorder {
	border-radius: 14px
}

.AN .portrait .horizontalRuler:hover, .SMs8 .portrait .horizontalRuler:hover
	{
	background-color: #f2f2f2
}

.AN .landscape .horizontalRuler:hover, .SMs8 .landscape .horizontalRuler:hover,
	.ip5 .landscape .horizontalRuler:hover {
	background-color: #f2f2f2
}

.XMmix .horizontalRuler:hover, .XMmix .verticalRuler:hover, .XMmix2 .horizontalRuler:hover,
	.XMmix2 .verticalRuler:hover {
	background-color: #f2f2f2
}

.AN .verticalRuler, .SMs8 .verticalRuler, .XMmix .verticalRuler, .XMmix2 .verticalRuler
	{
	position: relative
}

.full-preview .preview-lr-panel {
	transform: translateX(-280px)
}

.full-preview .preview-lr-panel .toggle-btn {
	transform: translate(60px, -23px) rotate(180deg)
}

.full-preview .phone-view-box {
	left: 0
}

.full-preview .preview-scale-setting {
	display: none
}

.preview-lr-panel {
	position: fixed;
	width: 240px;
	font-size: 13px;
	left: 0;
	top: 0;
	bottom: 0;
	background: rgba(60, 60, 70, .98);
	color: #eee;
	box-shadow: 2px 0 15px rgba(0, 0, 0, .15);
	z-index: 2;
	transition: transform .2s ease-in-out
}

.preview-lr-panel .panel {
	position: absolute;
	left: 0;
	top: 45px;
	right: 0;
	bottom: 0
}

.canvas-dom {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background: #2c2c32
}

.toggle-btn {
	position: absolute;
	right: -16px;
	top: 50%;
	transform: translateY(-50%);
	width: 32px;
	height: 32px;
	cursor: pointer;
	opacity: .7;
	transition: opacity .1s, transform .2s;
	transition-timing-function: ease-in-out;
	border-radius: 50%;
	box-shadow: 0 2px 4px rgba(0, 0, 0, .25)
}

.toggle-btn:hover {
	opacity: 1
}

.toggle-btn::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url(/images/new_images-c2d60a779f.png);
	background-size: 1000px 1000px;
	background-position: -510px -50px
}

.setting-list {
	position: absolute;
	top: 140px;
	left: 243px;
	width: 30px;
	text-align: center
}

.setting-list.not-project {
	top: 5px
}

.setting-list.not-project.view-type-contr .note-icon {
	display: none
}

.setting-list>i {
	margin-top: 10px;
	font-size: 18px;
	padding: 0 5px 0 2px;
	cursor: pointer;
	-webkit-user-select: none
}

.setting-list>i.note-icon {
	font-size: 15px
}

.setting-list>i.setting-icon {
	font-size: 16px
}

.setting-list>i.active {
	color: #f56464
}

.preview-scale-setting {
	position: absolute;
	width: 200px;
	background: #34343d;
	box-shadow: 0 0 10px 2px rgba(0, 0, 0, .2);
	border-radius: 2px;
	left: 35px;
	top: -5px;
	overflow: hidden;
	text-align: left;
	z-index: 1
}

.preview-scale-setting .scale-group {
	border-bottom: 1px solid #000
}

.preview-scale-setting .scale-group i {
	position: relative;
	float: left;
	width: 50px;
	border-right: 1px solid #000;
	box-sizing: border-box;
	margin: 0;
	height: 36px;
	line-height: 36px;
	font-size: 20px;
	text-align: center;
	color: #fff;
	cursor: pointer;
	z-index: 1
}

.preview-scale-setting .scale-group i:last-child {
	border: none
}

.preview-scale-setting .scale-group i:before {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background: #f56464;
	opacity: .7;
	z-index: -1
}

.preview-scale-setting .scale-group i:not (.disabled ):hover:before {
	content: ''
}

.preview-scale-setting .scale-group i.disabled {
	color: #666;
	cursor: default
}

.preview-scale-setting .scale-group i.disabled .material-icons {
	color: inherit
}

.preview-scale-setting .scale-group .number {
	font-size: 12px;
	font-weight: 700
}

.preview-scale-setting .C_selectBox {
	margin: 12px 0 11px 10px
}

.preview-info-panel .base-btn {
	float: left;
	width: auto;
	margin: 20px 0 0 10px;
	padding: 0 15px
}

.preview-info-panel .view-edit-btn {
	margin-left: 75px
}

.preview-info-panel .title {
	text-align: center;
	margin-top: 25px
}

.preview-info-panel .share-box {
	position: absolute;
	left: 0;
	bottom: 20px;
	width: 100%
}

.preview-info-panel .share-box .share-title {
	float: left;
	line-height: 24px;
	margin-left: 22px
}

.preview-info-panel .share-box .bdsharebuttonbox {
	float: left;
	margin-left: 10px
}

.preview-info-panel .share-box .bdsharebuttonbox a {
	float: left;
	width: 28px;
	height: 24px;
	background: url(/images/images-abb0efe34b.png);
	margin: 0 0 0 3px;
	padding: 0
}

.preview-info-panel .share-box .bdsharebuttonbox a.bds_tsina {
	background-position: -782px -368px
}

.preview-info-panel .share-box .bdsharebuttonbox a.bds_weixin {
	background-position: -813px -368px
}

.preview-info-panel .share-box .bdsharebuttonbox a.bds_qzone {
	background-position: -844px -368px
}

.preview-info-panel .share-box .bdsharebuttonbox a.bds_renren {
	background-position: -876px -368px
}

.preview-info-panel .share-box .bdsharebuttonbox a.bds_more {
	background-position: -909px -368px
}

.preview-info-panel .qrcode {
	width: 180px;
	height: 180px;
	border-radius: 4px;
	overflow: hidden;
	margin: 20px 30px 0
}

.preview-info-panel .qrcode img {
	width: 100%;
	height: 100%
}

.preview-info-panel .preview-site {
	float: left;
	border: 1px solid #eee;
	border-radius: 4px;
	margin: 15px 0 15px 72px;
	padding: 4px 12px;
	font-size: 12px;
	text-indent: 1.3em;
	position: relative;
	cursor: pointer;
	-webkit-user-select: text
}

.preview-info-panel .preview-site:hover {
	opacity: .9
}

.preview-info-panel .preview-site::before {
	content: '';
	position: absolute;
	left: 10px;
	top: 6px;
	background-image: url(/images/iconImages-cafd935dad.png);
	background-size: 1000px 1000px;
	background-position: -108px -354px;
	width: 12px;
	height: 12px
}

.preview-note-panel {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 240px;
	border-radius: 4px;
	right: -255px;
	color: #eee;
	font-size: 13px;
	overflow-y: scroll;
	pointer-events: auto
}

.preview-note-panel::before {
	content: '';
	background-image: url(/images/iconImages-cafd935dad.png);
	background-size: 1000px 1000px;
	position: absolute;
	top: 50%;
	left: 0;
	width: 11px;
	height: 15px;
	background-position: -251px -460px;
	transform: translate(-11px, -50%)
}

.preview-note-panel .index {
	text-align: center;
	height: 20px;
	line-height: 20px;
	border-radius: 4px;
	border: 1px solid #eee;
	display: inline-block;
	padding: 0 5px;
	min-width: 10px
}

.preview-note-panel .note-content {
	line-height: 1.8;
	margin-top: 10px;
	user-select: text
}

.preview-note-panel pre {
	font-family: inherit;
	white-space: pre-wrap;
	word-wrap: break-word;
	font-size: inherit;
	width: 100%;
	display: inline-block
}

.preview-note-panel li {
	padding: 10px 15px;
	margin-top: 10px;
	transition: background .2s;
	cursor: default
}

.preview-note-panel li.hover, .preview-note-panel li:hover {
	background: rgba(245, 100, 100, .5)
}

.preview-page-panel {
	font-size: 14px
}

.preview-page-panel .page-num {
	position: relative;
	margin: 20px 10px 0;
	text-indent: 25px
}

.preview-page-panel .page-num::before {
	content: '';
	background-image: url(/images/new_images-c2d60a779f.png);
	background-size: 1000px 1000px;
	position: absolute;
	left: 0;
	top: 0;
	width: 20px;
	height: 20px;
	background-position: -145px -469px
}

ul.preview-pages {
	position: absolute;
	top: 55px;
	bottom: 10px;
	left: 10px;
	right: 10px;
	width: auto
}

ul.preview-pages li {
	cursor: pointer;
	line-height: 32px;
	height: 32px;
	border-radius: 2px
}

ul.preview-pages li:nth-child(2n) {
	background: 0 0
}

ul.preview-pages li:nth-child(2n+1) {
	background: rgba(255, 255, 255, .03)
}

ul.preview-pages li::after {
	content: '';
	position: absolute
}

ul.preview-pages li.active {
	background: rgba(245, 100, 100, .3)
}

ul.preview-pages li.active::after {
	width: 0;
	height: 0;
	right: 8px;
	top: 12px;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-left: 6px solid #f56464
}

ul.preview-pages li.has-comment::after {
	top: 5px;
	right: 3px;
	width: 20px;
	height: 20px;
	border: none;
	opacity: .6;
	background-image: url(/images/new_images-c2d60a779f.png);
	background-size: 1000px 1000px;
	background-position: -942px -22px
}

#shareBox.share-box {
	position: absolute;
	left: 0;
	bottom: 20px;
	width: 100%
}

#shareBox.share-box .bds_weixin .qrcode-box {
	pointer-events: none;
	padding-bottom: 0;
	bottom: 30px
}

#shareBox.share-box .bds_weixin .qrcode-box .qrcode-img {
	background: url(/images/homeQrcode-b41d95e01e.png)
}

#shareBox.share-box .share-title {
	float: left;
	line-height: 24px;
	font-size: 13px;
	margin-left: 22px
}

#shareBox.share-box .bdsharebuttonbox {
	float: left;
	margin-left: 10px
}

#shareBox.share-box .bdsharebuttonbox a {
	float: left;
	width: 28px;
	height: 24px;
	background: url(/images/images-abb0efe34b.png);
	margin: 0 0 0 3px;
	padding: 0
}

#shareBox.share-box .bdsharebuttonbox a.bds_tsina {
	background-position: -782px -368px
}

#shareBox.share-box .bdsharebuttonbox a.bds_weixin {
	opacity: 1;
	background-position: -813px -368px
}

#shareBox.share-box .bdsharebuttonbox a.bds_qzone {
	background-position: -844px -368px
}

#shareBox.share-box .bdsharebuttonbox a.bds_renren {
	background-position: -876px -368px
}

#shareBox.share-box .bdsharebuttonbox a.bds_more {
	background-position: -909px -368px
}

body .bdshare_popup_box {
	border-radius: 2px
}

body .bdshare_popup_box .bdshare_popup_top {
	color: #333;
	font-weight: 400;
	font-size: 12px
}

body .bdshare_popup_box .bdshare_popup_bottom {
	display: none
}

.new-img {
	background-image: url(/images/new_images-c2d60a779f.png);
	background-size: 1000px auto
}

.C_slideInput {
	float: left;
	position: relative;
	width: 50px;
	height: 24px;
	border-radius: 4px;
	border: 1px solid #cdcdcd;
	overflow: hidden;
	margin: 7px 0 0 0
}

.disabledInput, .slideInput {
	position: absolute;
	width: 100%;
	font-size: 14px;
	padding: 3px 0;
	height: 18px;
	text-align: center;
	border: none;
	background: #2f2f36;
	color: #fff;
	box-shadow: 0 1px 1px rgba(0, 0, 0, .35) inset, 0 1px 1px
		rgba(0, 0, 0, .15);
	border-radius: 4px
}

.disabledInput {
	box-shadow: none
}

.slideInputArrow {
	position: absolute;
	width: 7px;
	height: 26px;
	background-position: -7px -46px;
	cursor: ew-resize
}

#textPageHeight input {
	font-size: 12px
}

.left-menu {
	position: fixed;
	left: 0;
	top: 0;
	bottom: 0;
	width: 200px;
	background: #3c3d43;
	box-shadow: 1px 0 2px rgba(0, 0, 0, .3)
}

.left-menu .left-notification-box {
	display: inline-block;
	margin-left: 10px;
	padding: 0 5px;
	height: 16px;
	line-height: 16px;
	color: #fff;
	background: #f56464;
	border-radius: 8px;
	min-width: 16px;
	text-align: center;
	font-size: 12px
}

.left-menu .menu-title {
	width: 100%;
	height: 32px;
	line-height: 32px;
	color: #a6a6a6;
	font-size: 12px;
	padding-left: 12px;
	box-sizing: border-box;
	cursor: default
}

.left-menu .menu-btn {
	position: relative;
	width: 100%;
	height: 36px;
	line-height: 36px;
	color: rgba(255, 255, 255, .8);
	font-size: 14px;
	padding-left: 52px;
	box-sizing: border-box;
	cursor: pointer;
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis
}

.left-menu .menu-btn::before {
	content: '';
	position: absolute;
	width: 20px;
	height: 20px;
	left: 25px;
	top: 8px;
	background-image: url(/images/pcImages-d7a3fa4aef.png);
	background-size: 500px auto;
	opacity: .8
}

.left-menu .menu-btn.active, .left-menu .menu-btn:hover {
	color: #fff
}

.left-menu .menu-btn.active::before, .left-menu .menu-btn:hover::before
	{
	opacity: 1
}

.left-menu .menu-btn.active {
	cursor: default;
	background: rgba(216, 216, 216, .2)
}

.left-menu .menu-btn.userhome-btn::before {
	background-position: -300px 0
}

.left-menu .menu-btn.square-btn::before {
	background-position: -240px 0
}

.left-menu .menu-btn.forum-btn::before {
	background-position: -260px 0
}

.left-menu .menu-btn.price-btn::before {
	background-position: -456px -61px
}

.left-menu .menu-btn.tutorial-btn::before {
	background-position: -280px 0
}

.left-menu .menu-btn.notification-btn::before {
	background-position: -400px 0
}

.left-menu .menu-btn.setting-btn::before {
	background-position: -420px 0
}

.left-menu .menu-btn.getVip-btn::before {
	background-position: -450px -18px
}

.left-menu .menu-btn.web-btn::before {
	background-position: -460px 0
}

.left-menu .menu-btn.mobile-btn::before {
	background-position: -440px 0
}

.left-menu .menu-btn.designTool-btn::before {
	background-image: url(/images/design-logo-fc6c9f3d0d.png);
	background-size: 20px 20px
}

.pc-app.allPanel {
	margin-left: 230px;
	margin-right: 30px
}

.pc-app.editor header {
	box-shadow: 0 1px 0 #a33232 inset
}

.pc-app .main {
	margin-left: auto;
	margin-right: auto;
	padding-top: 30px
}

.pc-app .user-home {
	padding-top: 33px
}

.pc-app .user-home .content-list {
	margin-top: 125px;
	min-width: calc(100vw - 260px)
}

.pc-app .user-home .main-right {
	margin-left: 0
}

.pc-app .square-main .content-list {
	min-width: calc(100vw - 230px)
}

.pc-app .square-main, .pc-app .user-home {
	width: auto
}

.pc-app .tutorial-main {
	padding-top: 0
}

.pc-app .tutorial-main .page-title.margin-top {
	margin-top: 30px
}

.pc-app .tutorial-main .tutorial-box {
	margin-top: 50px
}

.pc-app .forum-main, .pc-app .help-center-main, .pc-app .post-main {
	min-width: 1020px;
	max-width: 1200px;
	width: auto
}

.pc-app .forum-main .main-right, .pc-app .help-center-main .main-right,
	.pc-app .post-main .main-right {
	flex: none;
	width: 250px
}

.pc-app .forum-main .main-left, .pc-app .help-center-main .main-left,
	.pc-app .post-main .main-left {
	flex: 1;
	width: auto
}

.pc-app .list-container .content-list>ul>li {
	margin-right: 40px
}

.pc-app .square-main {
	padding-top: 95px
}

.pc-app .square-nav {
	width: auto;
	left: 200px;
	right: 0;
	top: 0;
	height: 38px;
	background: #2c2c32;
	text-align: left;
	box-shadow: none;
	padding: 30px;
	padding-bottom: 0;
	z-index: 2
}

.pc-app .square-nav::before {
	content: '';
	position: absolute;
	bottom: -1px;
	left: 30px;
	width: calc(100% - 60px);
	height: 1px;
	background: rgba(255, 255, 255, .2)
}

.pc-app .square-nav li {
	margin: 8px 10px 0 0;
	padding-bottom: 7px;
	color: #fff
}

.pc-app .square-nav li:hover {
	color: #ffb4b4
}

.pc-app .square-nav li.active {
	color: #ffb4b4;
	border-bottom: 2px solid #ffb4b4
}

.pc-app .inbox-frame {
	height: calc(100vh - 66px)
}

.pc-app .handle-box {
	float: left;
	margin-right: 12px
}

.pc-app .handle-btn {
	float: left;
	width: 24px;
	height: 24px;
	box-sizing: border-box;
	border: 1px solid #982727;
	background-color: #d24646;
	border-radius: 4px;
	margin-top: 10px;
	background-image: url(/images/pcImages-d7a3fa4aef.png);
	background-size: 500px auto;
	cursor: pointer
}

.pc-app .handle-btn:hover {
	background-color: #e05555
}

.pc-app .handle-btn.disable {
	background-color: #b63131;
	cursor: not-allowed
}

.pc-app .popup {
	top: -1px
}

.pc-app .popup.center {
	top: 50%
}

.pc-app .toast {
	top: 0
}

.pc-app .back-btn {
	margin-left: 12px;
	border-radius: 4px 0 0 4px;
	background-position: -180px 0
}

.pc-app .forward-btn {
	margin-left: -1px;
	border-radius: 0 4px 4px 0;
	background-position: -199px 0
}

.pc-app .reload-btn {
	margin-left: 12px;
	background-position: -219px 1px
}

.pc-app .new-post-left {
	margin-top: 8px
}

@media screen and (min-width:1280px) and (max-width:1440px) {
	.pc-app .forum-main .main-right, .pc-app .post-main .main-right {
		margin-left: 30px
	}
}

.red-text {
	color: #f56464
}

.pink-text {
	color: #ffb4b4
}

.underline-text {
	text-decoration: underline;
	cursor: pointer
}

.base-input-box {
	line-height: 40px;
	display: inline-flex;
	margin-bottom: 23px;
	margin-left: 15px
}

.base-input-box>.info-text {
	width: 64px;
	margin: 0 32px 0 0
}

.base-input-box .setting-base-input-box>input {
	width: 312px;
	background: rgba(0, 0, 0, .3)
}

.base-input-box.no-margin-bottom {
	margin-bottom: 0
}

.setting-base-input-box>.error-tips {
	height: 20px;
	line-height: 20px;
	color: #f56464;
	font-size: 12px;
	margin-top: 6px;
	margin-left: 20px
}

.setting-base-input-box>.error-tips::before {
	content: '';
	position: absolute;
	width: 20px;
	height: 20px;
	background: url(/images/iconsAll-f89a4b718b.png);
	background-size: 1000px 1000px;
	margin-left: -20px;
	margin-top: -1px;
	background-position: 0 -20px
}

.setting-base-input-box>input {
	width: 256px;
	height: 40px;
	background: rgba(89, 89, 102, .3);
	color: #ccc;
	border-radius: 3px;
	font-size: 14px;
	text-indent: 14px;
	box-sizing: border-box;
	border: 1px solid transparent
}

.setting-base-input-box>input:focus {
	border: 1px solid #fff;
	color: #fff
}

.setting-base-input-box.is-long-input>input {
	width: 400px
}

.setting-base-input-box.is-error>input {
	border: 1px solid #f56464
}

.setting-base-input-box.is-error>input:focus {
	border: 1px solid #fff
}

.setting-base-input-box.is-iconType>input {
	width: 400px;
	height: 40px;
	text-indent: 43px
}

.setting-base-input-box.is-iconType::before {
	content: '';
	position: absolute;
	width: 20px;
	height: 20px;
	background: url(/images/iconsAll-f89a4b718b.png);
	background-size: 1000px 1000px;
	margin-top: 11px;
	margin-left: 12px;
	background-position: 0 0;
	cursor: default
}

.vip-share-mask {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, .75);
	z-index: 10
}

.vip-share-mask .vip-popup {
	position: absolute;
	width: 449px;
	height: 280px;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto
}

.vip-share-mask .vip-popup .vip-popup-left {
	position: absolute;
	top: -90px;
	width: 173px;
	height: 145px;
	background: url(/images/vipShareImg-61dc9a67ef.png);
	background-size: 1000px 1000px;
	background-position: 0 -300px
}

.vip-share-mask .vip-popup .vip-popup-close {
	position: absolute;
	right: 0;
	top: -18px;
	width: 34px;
	height: 34px;
	margin-right: -9px;
	cursor: pointer;
	background: url(/images/vipShareImg-61dc9a67ef.png);
	background-size: 1000px 1000px;
	background-position: -7px -239px
}

.vip-share-mask .vip-popup .vip-popup-body {
	width: 440px;
	height: 280px;
	border: 2px solid #fff;
	border-radius: 6px;
	background: #2c2d32
}

.vip-share-mask .vip-popup .vip-popup-body .vip-popup-text {
	width: 294px;
	height: 60px;
	margin: 55px auto 0 auto;
	text-align: center;
	color: #fff;
	font-size: 16px
}

.vip-share-mask .vip-popup .vip-popup-body .vip-popup-text span {
	color: #ffb4b3;
	font-weight: 700
}

.vip-share-mask .vip-popup .vip-popup-body .vip-emailLogin,
	.vip-share-mask .vip-popup .vip-popup-body .vip-wechatLogin {
	width: 240px;
	height: 40px;
	margin-left: 100px;
	margin-top: 25px;
	border-radius: 3px;
	background: #44b549;
	color: #fff;
	cursor: pointer;
	display: block;
	line-height: 40px;
	text-align: center
}

.vip-share-mask .vip-popup .vip-popup-body .vip-emailLogin :hover,
	.vip-share-mask .vip-popup .vip-popup-body .vip-wechatLogin :hover {
	opacity: .9
}

.vip-share-mask .vip-popup .vip-popup-body .vip-emailLogin {
	background: #2c2d32;
	border: solid 1px;
	margin-top: 20px;
	line-height: 38px;
	box-sizing: border-box
}

.vip-share-mask .vip-popup2 {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%)
}

.vip-share-mask .vip-popup2 .vip-popup-close {
	position: absolute;
	right: -16px;
	top: -4px;
	width: 34px;
	height: 34px;
	background: url(/images/vipShareImg-61dc9a67ef.png);
	background-size: 1000px 1000px;
	background-position: -7px -7px;
	cursor: pointer;
	z-index: 1
}

.vip-share-mask .vip-popup2 .vip-popup-body {
	width: 564px;
	height: 424px;
	margin-top: 12px;
	border: 2px solid #fff;
	border-radius: 6px;
	background: url(/images/vipShareImg-61dc9a67ef.png);
	background-size: 1000px 1000px;
	background-position: -256px -60px;
	position: relative
}

.vip-share-mask .vip-popup2 .vip-popup-body .vip-popup-title {
	height: 40px;
	float: left;
	font-size: 28px;
	margin-top: 42px;
	margin-left: 40px;
	color: #fff
}

.vip-share-mask .vip-popup2 .vip-popup-body .vip-popup-img {
	width: 218px;
	height: 163px;
	background: url(/images/vipShareImg-61dc9a67ef.png);
	background-size: 1000px 1000px;
	background-position: 0 -60px;
	position: absolute;
	top: 33px;
	left: 330px
}

.vip-share-mask .vip-popup2 .vip-popup-body .vip-popup-text {
	width: 434px;
	height: 64px;
	margin: 12px auto 20px;
	margin-top: 220px;
	color: #fff;
	font-size: 16px
}

.vip-share-mask .vip-popup2 .vip-popup-body .vip-popup-text span {
	color: #ffb4b4
}

.vip-share-mask .vip-popup2 .vip-popup-body .vip-popup-btn {
	position: relative;
	display: block;
	width: 160px;
	height: 40px;
	margin: 0 auto;
	border-radius: 3px;
	background: #f56464;
	color: #fff;
	cursor: copy
}

.vip-share-mask .vip-popup2 .vip-popup-body .vip-popup-btn:hover {
	opacity: .9
}

.vip-share-mask .vip-popup2 .vip-popup-body .vip-popup-foot {
	height: 20px;
	margin-top: 28px;
	margin-right: 20px;
	text-align: right;
	color: #fff;
	font-size: 14px
}

.vip-share-mask .vip-popup2 .vip-popup-body .vip-popup-foot>a {
	color: #ffb4b3
}

.loading-view {
	transition: opacity .5s
}

.loading-view:not (.noFixed ){
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, .8);
	z-index: 1000000
}

.loading-view .loader {
	position: absolute;
	width: 200px;
	height: 200px;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%)
}

.loading-view h1 {
	color: #fff;
	font-size: 16px;
	letter-spacing: 1px;
	font-weight: 700;
	margin-bottom: 20px;
	font-weight: 200;
	text-align: center
}

.loading-view .loader span {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	display: inline-block;
	position: absolute;
	left: 50%;
	margin-left: -10px;
	animation: 3s infinite linear;
	-moz-animation: 3s infinite linear;
	-o-animation: 3s infinite linear
}

.loading-view .loader span:nth-child(2) {
	background: #bb3030;
	animation: kiri 1.2s infinite linear;
	-moz-animation: kiri 1.2s infinite linear;
	-o-animation: kiri 1.2s infinite linear
}

.loading-view .loader span:nth-child(3) {
	background: #2c2c32;
	z-index: 100
}

.loading-view .loader span:nth-child(4) {
	background: #529deb;
	animation: kanan 1.2s infinite linear;
	-moz-animation: kanan 1.2s infinite linear;
	-o-animation: kanan 1.2s infinite linear
}

@
keyframes kanan { 0%{
	transform: translateX(20px)
}

50%{
transform
:translateX(-20px)
}
100%{
transform
:translateX(20px)
;z-index
:
200
}
}
@
-moz-keyframes kanan { 0%{
	-moz-transform: translateX(20px)
}

50%{
-moz-transform
:translateX(-20px)
}
100%{
-moz-transform
:translateX(20px)
;z-index
:
200
}
}
@
-o-keyframes kanan { 0%{
	-o-transform: translateX(20px)
}

50%{
-o-transform
:translateX(-20px)
}
100%{
-o-transform
:translateX(20px)
;z-index
:
200
}
}
@
keyframes kiri { 0%{
	transform: translateX(-20px);
	z-index: 200
}

50%{
transform
:translateX(20px)
}
100%{
transform
:translateX(-20px)
}
}
@
-moz-keyframes kiri { 0%{
	-moz-transform: translateX(-20px);
	z-index: 200
}

50%{
-moz-transform
:translateX(20px)
}
100%{
-moz-transform
:translateX(-20px)
}
}
@
-o-keyframes kiri { 0%{
	-o-transform: translateX(-20px);
	z-index: 200
}

50%{
-o-transform
:translateX(20px)
}
100%{
-o-transform
:translateX(-20px)
}
}
.loading-enter.loading-enter-active {
	opacity: 1
}

.loading-leave {
	opacity: 1
}

.loading-leave.loading-leave-active {
	opacity: .01
}

.feishu-size-tip {
	position: fixed;
	left: 0;
	margin: 0 auto;
	bottom: 0;
	height: 80px;
	background: linear-gradient(3deg, #5887f6, #3562ca);
	opacity: .97;
	text-align: center;
	line-height: 80px;
	font-size: 14px;
	color: #fff;
	z-index: 10000
}

.feishu-size-tip .feishu-tip-text {
	color: #ffb4b4
}

.feishu-size-tip .feishu-tip-close-btn {
	position: absolute;
	width: 32px;
	height: 32px;
	background-image: url(/images/close-40cb16bd21.png);
	background-size: 32px;
	top: 24px;
	right: 24px
}

.design-tool-lead-panel {
	width: 100%;
	height: 100px;
	background: #c94747
}

.design-tool-lead-panel .lead-box {
	width: 100%;
	height: 100px;
	max-width: 1920px;
	min-width: 1200px;
	margin: 0 auto;
	position: relative
}

.design-tool-lead-panel .lead-bg-img {
	width: 1440px;
	height: 100px;
	background-size: 1440px 100px;
	background-image: url(/images/lead-bg-f20d61bdb4.png);
	position: absolute;
	left: 50%;
	transform: translateX(-50%)
}

.design-tool-lead-panel .btn-link {
	font-size: 18px;
	color: #fff;
	font-weight: 700;
	position: absolute;
	padding-right: 35px;
	right: 6px;
	bottom: 13px
}

.design-tool-lead-panel .btn-link::after {
	content: '';
	position: absolute;
	width: 35px;
	height: 20px;
	background-size: 35px 20px;
	background-image: url(/images/link-icon-de19c7168a.png);
	right: 0;
	top: 3px
}